<template>
	<view class="page">
	<!-- 	<up-navbar title="" @leftClick="leftClick" @rightClick="{}" :autoBack="false" bgColor="#fff"
			placeholder></up-navbar> -->
		<view class="content flex column box-sizing width-full padding-30">
			<view class="flex space-between">
				<view class="flex fontSize-28">
					{{emitData.subscript}}块
				</view>
	<!-- 			<view class="flex">
					<span @click="open" class="color-409EFF fontSize-28">
						词义查看
					</span>
				</view> -->
			</view>
			<view class="flex flex-wrap marginTop-30">
				<view
					:class="textData&&Object.keys(textData).length>0?textData[t.wordId]==1?'blueDom':'redDom':'defaultDom'"
					class="wordBox fontSize-28 weight-700 flex flex-start marginBottom-20 "
					v-for="(t,i) in emitData.wordList" :key="i" @click="clickWord(t,i)">
					<view class="fontSize-30 weight-700"
						:class="{'clicked': currentIndex == i}">
						{{parseInt(i)+1}}.{{t.wordHead}}
					</view>
					<!-- <view class="fontSize-24" >
						{{item.phone}}
					</view> -->
				</view>
			</view>
			<view class=" marginTop-30 color-6d6d6d fontSize-26 " style="line-height: 40rpx;">
				示例:我周日去公园,把apple和水input书包。走到公园
				门口看到了一个banner,上面画着一只elephant在table
				lamp下看书。
			</view>
			<view style="height: 28px;" class="width-full marginTop-30 flex flex-end">
				<!-- <up-icon v-if="!editType" @click="editType = true" name="edit-pen" color="#2979ff" size="28"></up-icon> -->
			</view>
			<!-- <up-button @click="submit1" size="normal" type="primary" text="保存"></up-button> -->
			<view class="marginTop-10 height-350">
				<up-textarea :disabled="!editType" height="300rpx" v-model="textarea"
					placeholder="根据自己的生活经验,编写一个故事,把以上单词全部包含在故事中。"></up-textarea>
			</view>
			<up-popup :safeAreaInsetBottom="false" mode="center" closeOnClickOverlay closeable round="5"
				:show="phoneShow" @close="close" @open="phoneShow = true">

				<view class="popupBox fontSize-28">
					<view class="width-full weight-700 text-center">
						{{emitData.subscript}}块
					</view>


					<view class="flex column marginTop-30" v-if="selectObj.wordHead">
						<view class="flex items-center space-between height-120">
							<view class="fontSize-30 weight-700" style="min-width: 200rpx;">
								{{selectObj.wordHead}}
							</view>
							<!-- <view class="fontSize-28" >
								{{it.tran}}
							</view> -->
							<view class="width-full">
								<view class="wordsDefaultText fontSize-24 ">
									<view class="marginBottom-5">
										{{selectObj.tran}}
									</view>
								</view>
								<!-- <view class="wordsDefaultText fontSize-24" :class="type==1?activeData[index]?'wordsText':'hiddenText':!activeData[index]&&defaultActive&&index<defaultActive?'wordsText':'hiddenText'" v-html="returnVal(item.tran)"></view> -->
								<!-- <span v-if="type==2&&!activeData[index]&&defaultActive&&index<defaultActive">{{item.aa}}</span> -->
							</view>
						</view>
					</view>

					<view class="text-center marginTop-30 marginBottom-30" v-else>
						请先选择需要查看的单词
					</view>
				</view>
			</up-popup>
			<up-modal :show="editShow" :content="content" confirmText="我知道了" @close="cancel" @confirm="setTitle"
				closeOnClickOverlay title=" "></up-modal>
		</view>
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center" style="width: 80vw;">
				<up-button v-if="editType" @click="submit" size="normal" type="primary" text="保存"></up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject
	} from 'vue';
	import {
		onReady,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		promise
	} from '../../uni_modules/uview-plus/libs/function/test';
	const practiceWordsApi = inject('practiceWords');
	const textData = ref({});
	const phoneShow = ref(false);
	const emitData = ref({})
	const textarea = ref('')
	const editShow = ref(false);
	const content = ref('');
	const editType = ref(false)
	const selectObj = ref({})
	const currentIndex = ref(null);
	const startReciteApi = inject('startRecite');
	onLoad((op) => {
		let parseData = op.data ? JSON.parse(op.data) : {};
		emitData.value = op.data ? parseData : {};
		// editType.value = op.data?parseData.editType&&parseData.editType==1?false:true:true
		editType.value = true
		console.log(parseData, op.data);
		textarea.value = parseData.content ? parseData.content : ''

		//计时
		let emitDataVal = parseData && parseData.subscript ? parseData.subscript.split('_') : ['', ''];
		startReciteApi({
			page: parseData.page,
			big_sort: emitDataVal[0],
			small_sort: emitDataVal[1],
			type: parseData.type ? parseData.type : 3,
		}).then(res => {
			console.log('计时')
		});


	})
	const close = () => {
		phoneShow.value = false
	}
	// const open = () => {
	// 	phoneShow.value = true
	// }
	const cancel = () => {
		editShow.value = false
	}
	const setTitle = () => {
		editShow.value = false
	}
	const submit1 = () => {
		emitData.value.wordList.map(e => {
			textarea.value += '-----' + e.wordHead
		})
	}

	const leftClick = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	const ruleWord = () => {
		return new Promise((resolve, reject) => {
			let list = emitData.value.wordList
			let num = 0
			let k = 0
			let obj = {}
			if (list && list.length > 0 && textarea.value && textarea.value != '') {
				for (let s of list) {
					let idx = textarea.value.indexOf(s.wordHead)
					if (idx == -1) {
						num++
						obj[s.wordId] = 0
					} else {
						obj[s.wordId] = 1
					}
					console.log(textarea.value, s.wordHead, num, idx, k, 'hhhhhhhh')
					if (k == list.length - 1) {
						if (num == 0) {
							resolve({
								num: 0,
								obj
							})
						} else {
							resolve({
								num,
								obj
							})
						}

					}
					k++
				}

			} else {
				resolve({
					num: list.length,
					obj
				})
			}
		})
	}
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}
	const clickWord = (val, index) => {
		selectObj.value = val
		currentIndex.value = index
		phoneShow.value = true
	}

	const submit = () => {
		ruleWord().then(e => {
			console.log(e, 'sssssssss');
			if (e && e.num == 0) {
				let parseData = emitData.value ? JSON.parse(JSON.stringify(emitData.value)) : {};
				let subscript = parseData && parseData.subscript ? parseData.subscript : '';
				let emitDataVal = subscript.split('_');
				practiceWordsApi({
					page: parseData.page,
					big_sort: emitDataVal[0],
					small_sort: emitDataVal[1],
					content: textarea.value

				}).then(res => {
					console.log(res, 2222)
					uni.redirectTo({
						url: '/pages/index/practiceWordNext?data=' + JSON.stringify(res[0])
					})
				})
			} else {
				content.value = `啊哦,你还有${e.num}个单词未编写到你的故事中呦。`
				textData.value = e.obj
				editShow.value = true
			}
			return



		})


	}
</script>

<style lang="scss" scoped>
	.wordBox {
		width: calc(33.33% - 11rpx);
		// padding: 10rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		height: 100rpx;
		justify-content: center;
		align-items: center;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
		border-radius: 8rpx;
		background-color: #f9f9f9;

		&:nth-child(3n) {
			margin-right: 0;
		}
	}

	.defaultDom {
		border: 1rpx solid #f9f9f9;
		color: #333;
	}

	.redDom {
		border: 1rpx solid #ec7870;
		color: #ec7870;
	}

	.blueDom {
		border: 1rpx solid #5bbd67;
		color: #5bbd67;
	}

	.btns {
		padding-bottom: calc(50rpx);
	}

	.wordsDefaultText {
		scale: 1;
		z-index: -99999;
		display: flex;
		flex-direction: column;
	}

	.popupBox {
		width: 90vw;
		padding: 50rpx 30rpx 30rpx;
		// background-color: #fff;
		// border-radius: 5px;
		box-sizing: border-box;

		.btns {
			// padding-bottom: calc(50rpx);
		}
	}

	.clicked {
		color: #ec7870;
	}
</style>